<template>
	<view>
		<u-navbar title="发布课程" :safeAreaInsetTop="true" :autoBack="true">
			<view class="u-nav-slot" slot="right">
				<view v-if="id">
					<button class="submit" @click="saveBtn">保存</button>
				</view>
				<view v-else>
					<button v-if="type==1" class="submit" @click="publishOpen">发布</button>
					<button v-else-if="type==2" class="submit" @click="publish">发布</button>
					<button v-else class="un_submit">发布</button>
				</view>
			</view>
		</u-navbar>
		<view :style="{paddingTop:customBar+'px',height: '20rpx'}"></view>
		
		<view class="course">
			<view class="course_label">
				<text>课程类型</text>
				<text class="red">*</text>
			</view>
			<view class="flex align-c course_font" v-if="!id" @click="open('show')">
				<view v-if="typeIndex||typeIndex===0" class="f1">{{ typeList[typeIndex].name }}</view>
				<text v-else class="f1 p-c">请选择</text>
				<image src="/static/home/into-gray.png" mode="widthFix" class="into" />
			</view>
			<view class="flex align-c course_font" v-else>
				<view v-if="typeIndex||typeIndex===0" class="f1">{{ typeList[typeIndex].name }}</view>
				<image src="/static/home/into-gray.png" mode="widthFix" class="into" />
			</view>
		</view>
		
		<view class="course">
			<view class="course_label">
				<text>课程名称</text>
				<text class="red">*</text>
			</view>
			<input type="text" v-model="option.title" class="course_font" placeholder="请输入课程名称" placeholder-class="p-c">
		</view>
		
		<view class="course">
			<view class="course_label">
				<text>课程分类</text>
				<text class="red">*</text>
			</view>
			<view class="flex align-c course_font" @click="openClass">
				<view v-if="classIndex || classIndex === 0" class="f1">{{ classList[classIndex].name }}</view>
				<text v-else class="f1 p-c">请选择分类</text>
				<image src="/static/home/into-gray.png" mode="widthFix" class="into" />
			</view>
		</view>
		
		<view class="course">
			<view class="course_label">
				<text>店铺位置</text>
				<text class="red">*</text>
			</view>
			<input type="text" v-model="option.location" disabled class="course_font" placeholder="请输入店铺位置" placeholder-class="p-c">
		</view>
		
		<view class="course">
			<view class="course_label">
				<text>场馆选择</text>
				<text class="red">*</text>
			</view>
			<!-- <input type="text" v-model="option.location" disabled class="course_font" placeholder="请输入店铺位置" placeholder-class="p-c"> -->
			<view class="flex align-c course_font" @click="shopList">
				<view v-if="checkIndex||checkIndex === 0" class="f1">{{ list[checkIndex].title }}</view>
				<text v-else class="f1 p-c">请选择</text>
				<image src="/static/home/into-gray.png" mode="widthFix" class="into" />
			</view>
		</view>
		
		<view class="course">
			<view class="course_label">
				<text>时间</text>
				<text class="red">*</text>
			</view> 
			
			<view class="flex align-c course_font">
				<!-- <view class="f1 flex align-c" v-if="type==1">
					<text class="f1 t-c" v-if="option.begin_at" @click="openTime('begin_at')">{{ option.begin_at }}</text>
					<text class="f1 p-c t-c" v-else @click="openTime('begin_at')">请选择开始时间 </text>
					<text class="p-c"> - </text>
					<text class="f1 t-c" v-if="option.end_at" @click="openTime('end_at')">{{ option.end_at }} </text>
					<text class="f1 p-c t-c" v-else @click="openTime('end_at')">请选择结束时间 </text>
				</view> -->
				<view class="f1" @click="toTimePage">
					<text v-if="option.start_at" class="f1">{{ option.start_at }}</text>
					<view class="p-c" v-else>请选择</view>
				</view>
				<image src="/static/home/into-gray.png" mode="widthFix" class="into" />
			</view>
			
			<u-datetime-picker
			:show="showTime"
			v-model="value1"
			mode="datetime"
			:minHour="9"
			:max-hour="21"
			@cancel="closeTime"
			@confirm="confirmTime"
			></u-datetime-picker>
		</view>
		
		<view class="course" v-if="type == 2">
			<view class="course_label">
				<text>价格</text>
				<text class="red">*</text>
			</view>
			<view class="flex align-c course_font">
				<input type="text" v-model="option.price" class="f1 course_input red fw-b" placeholder="请输入价格" placeholder-class="p-c fw-n">
				<view class="p-c">单位/节</view>
			</view>
		</view>
		
		<view class="course">
			<view class="course_label">
				<text>课程封面图</text>
				<text class="red">*</text>
			</view>
			<view class="grid">
				<view class="upload_img" v-for="(v,i) in imgList" :key="i">
					<image src="/static/home/del-img.png" class="close_img" mode="aspectFill" @click="delItem(i,'imgList')" />
					<image :src="$img(v.indexOf('uploads') == -1? '/uploads/'+v : v )" mode="aspectFill"  />
				</view>
				<image src="/static/home/upload_img.png" v-if="imgList.length==0" mode="aspectFill" class="upload_img" @click="$upload('imgList')" />
			</view>
		</view>
		
		<view class="course">
			<view class="course_label">课程封面视频</view>
			<video v-if="video" :src="$img(video)" class="upload_video" />
			<view class="grid" v-else>
				<image src="/static/home/upload_img.png" mode="aspectFill" class="upload_img" @click="uploadVideo" />
			</view>
		</view>
		
		<view class="course">
			<view class="course_label">
				<text>课程详情图</text>
				<text class="red">*</text>
			</view>
			<view class="grid">
				<view class="upload_img" v-for="(v,i) in detailList" :key="i">
					<image src="/static/home/del-img.png" class="close_img" mode="aspectFill" @click="delItem(i,'detailList')" />
					<image :src="$img(v)" mode="aspectFill" />
				</view>
				<image src="/static/home/upload_img.png" mode="aspectFill" class="upload_img" @click="$upload('detailList')" />
			</view>
		</view>
		
		<view class="course" >
			<view class="course_label">
				<text>内容详情</text>
				<text class="red">*</text>
			</view>
			<textarea v-model="option.detail" maxlength="-1" class="course_textarea" placeholder="请输入课程内容详情" placeholder-class="p-c"></textarea>
			
		</view>

		<u-popup :show="show" :round="10" mode="bottom" @close="close('show')" @open="open('show')">
			<view class="item_box">
				<view class="item" v-for="(item,index) in typeList" :key="index" @click="checkType(item,index)">{{ item.name }}</view>
				<view class="item_red" @click="close">取消</view>
			</view>
		</u-popup>
		
		<u-popup :show="showClass" mode="bottom" @close="close('showClass')" @open="open('showClass')">
			<view class="pop_box">
				<view class="pop_tit">选择课程分类</view>
				<scroll-view scroll-y="true" class="class_box">
					<view v-for="(v,i) in classList" :key="i" 
					class="class_item" :class="{'class_act': v.isCheck}"
					@click="checkClass(i)">{{ v.name }}</view>
					
					<view class="noMore" v-if="!classList || !classList.length">
						<image src="/static/none-contract.png" mode="heightFix" class="no-data" />
						<view class="">暂无课程分类，快去添加吧~</view>
						<view class="toAddbtn" @click="$to('/pages/home/classify/classify_add')">去添加</view>
					</view>
				</scroll-view>
			</view>
			
		</u-popup>
	
		<u-popup :show="showLocation" mode="bottom"  @close="close('showLocation')" @open="open('showLocation')">
			<view class="">
				<scroll-view scroll-y="true" style="height: 60vh;">
					<radio-group name="">
						<label class="store-box between align-c"
						v-for="(v,i) in list" :key="i"
						@click="chooseClub(v,i)">
							<view class="flex align-c">
								<image v-if="image" :src="$img(image)" mode="aspectFill" class="teacher_img" />
								<view class="teacher_img" style="background-color: #ccc;"></view>
								<view class="teacher_name">{{ v.title }}</view>
							</view>
							<radio color="#F17816" :checked="v.isCheck" style="transform: scale(0.8);" />
						</label>
					</radio-group>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/libs/config.js'
	export default {
		data() {
			return {
				customBar: 0,
				val: '',
				id: '',
				typeList: [
					{
						name: '公开课',
						type: 1
					},
				],
				typeIndex: '',
				imgList: [],
				video: '',
				detailList: [],
				show: false,
				showTime: false,
				showLocation: false,
				type: '',
				value1: Number(new Date()),
				option: {
					title: '',
					location: '',
					start_at: '',
					begin_at: '',
					end_at: '',
					cover: '',
					img: '',
					detail: '',
					video: '',
					table_id: '',
					table_during_id: '',
					table_location_id: '',
					price: '',
					class: '',
					shop_id: '',
				},
				val: '',
				shop_id: '',
				placeholder: '开始输入...',
				table: null,
				table_during: null,
				shopInfo: null,
				classList: [],
				showClass: false,
				classIndex: '',
				detail: null,
				limit: '',
				image: '',
				list: '',
				checkIndex: '',
			}
		},
		onLoad(e) {
			this.getSystemInfo();
			if(e && e.id) {
				this.id = e.id;
				this.getClass();
				this.getDetail();
				this.shopList(1);
			}
		},
		onShow() {
			this.isLimit();
			var shop = uni.getStorageSync('shop');
			if(shop) {
				this.shopInfo = shop;
				this.option.location = shop.title;
				this.option.shop_id = shop.id;
			}
			uni.$on('returnDate', v => {
				v = JSON.parse(v);
				this.table = v;
			})
			uni.$on('returnTime', v => {
				v = JSON.parse(v);
				this.table_during = v;
			});
			this.getClass();
			this.watchDate();
		},
		methods: {
			getSystemInfo() {
				uni.getSystemInfo({
					success: (e) => {
						this.customBar = e.statusBarHeight + 44;
					}
				})
			},
			open(n) {
				if(n == 'showClass') {
					this.getClass();
				}
				this[n] = true;
			},
			close(n) {
				this[n] = false;
			},
			checkType(v,i) {
				this.typeIndex = i;
				this.type = v.type;
				this.show = false;
			},
			delItem(i,n) {
				this[n].splice(i,1);
			},
			async publishOpen() {
				const {option,imgList,detailList,video} = this;
				option.cover = imgList.join(',');
				option.img = detailList.join(',');
				option.video = video;
				option.price = 0;
				if(!option.title || !option.location || !option.start_at || !option.cover || !option.img || !option.detail || !imgList.length || !detailList.length) {
					console.log(option,9999);
					uni.showToast({
						title: '请先完善表单',
						icon: 'none'
					});
					return false;
				}
				let res = await this.$api.post('staff/course/create', option );
				if(res.code == 200) {
					uni.showToast({
						title: res.msg
					});
					setTimeout(v => {
						uni.navigateBack()
					},2500)
				}
			},
			async publish() {
				const {option,imgList,detailList,video} = this;
				option.cover = imgList.join(',');
				option.img = detailList.join(',');
				option.video = video;
				// console.log(option.start_at,'========');
				if(!option.title || !option.location || !option.start_at || !option.cover || !option.img || !option.detail || !option.price || !option.class || !imgList.length || !detailList.length) {
					uni.showToast({
						title: '请先完善表单',
						icon: 'none'
					});
					return false;
				}
				let res = await this.$api.post('staff/private/create', option );
				if(res.code == 200) {
					uni.showToast({
						title: res.msg
					});
					setTimeout(v => {
						uni.navigateBack();
					},2500);
				}
			},
			async getClass() {
				let res = await this.$api.get('staff/course/class');
				if(res.code == 200) {
					var arr = res.data;
					arr.forEach(v => {
						v.isCheck = false;
					});
					this.classList = arr;
					this.watchDetail();
				}
			},
			uploadVideo() {
				let that = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: (result) => {
						const files = result.tempFilePath;
						uni.showLoading()
						uni.uploadFile({
							url: `${config.baseUrl}uploadvideo`, //仅为示例，非真实的接口地址
							filePath: files,
							name: 'video',
							header: {
								"Authorization": uni.getStorageSync('token'),
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								uni.hideLoading();
								that.video = data.data.path;
							},
							fail: (err) => {
								uni.hideLoading();
							}
						});
					}
				})
			},
			watchDate() {
				const {table,table_during} = this;
				if(table && table_during) {
					this.option.start_at = table.date + ' ' + table_during.during;
					this.option.table_id = table.id;
					this.option.table_during_id = table_during.id;
					this.option.table_location_id = table.location_id;
				}
			},
			checkClass(i) {
				this.classList.forEach(v => {
					v.isCheck = false;
				});
				this.classIndex = i;
				this.classList[i].isCheck = true;
				this.option.class = this.classList[i].id;
				this.close('showClass');
			},
			async getDetail() {
				let res = await this.$api.get(`staff/course/show/${this.id}`);
				if(res.code == 200) {
					console.log(res,'^^^^^');
					this.detail = res.data;
					this.watchDetail();
				}
			},
			openClass() {
				this.getClass();
				this.open('showClass');
			},
			watchDetail() {
				const {detail,classList,list} = this;
				if(detail) {
					this.classList.forEach((v,i) => {
						if(v.id == detail.class) {
							this.classIndex = i;
							this.classList[i].isCheck = true;
						}
					})
					list.forEach((v,i) => {
						if(v.id == detail.table_location_id) {
							this.checkIndex = i;
							this.list[i].isCheck = true;
							this.option.table_location_id = v.id;
						}else {
							this.list[i].isCheck = false;
						}
					})
					
					this.option = {
						title: detail.title,
						location: detail.location,
						start_at: detail.start_at,
						cover: detail.cover,
						img: detail.img,
						detail: detail.detail,
						video: detail.video,
						table_id: detail.table_id,
						table_during_id: detail.table_during_id,
						table_location_id: detail.table_location_id,
						price: detail.price,
						class: detail.class,
						shop_id: detail.shop_id,
					}
					this.typeList.forEach((v,i) => {
						if(v.type== detail.type) {
							this.typeIndex = i
						}
					})
					
					this.type = detail.type;
					this.video = !detail.video || detail.video=="null" ? '' : detail.video;
					this.imgList = detail.cover ? detail.cover.split(',') : '';
					this.detailList = detail.img ? detail.img : '';
				}
			},
			async saveBtn() {
				this.option.price = this.option.price ? this.option.price : 0;
				this.option.img = this.option.img.join(',');
				let res = await this.$api.post(`staff/course/edit/${this.id}`,this.option);
				if(res.code == 200) {
					console.log(res,200);
					uni.showToast({
						title: res.msg
					});
					setTimeout(v => {
						uni.navigateBack();
					},2500);
				}
			},
			confirmTime(e) {
				var num = e.value;
				function add(m) {
					return m < 10 ? '0' + m : m;
				}
				if(num.toString().length != 13) {
					num = parseInt(num) * 1000
				}
				
				var time = new Date(num);
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				var h = time.getHours();
				var min = time.getMinutes();
				var date = y + '-' + add(m) + '-' + add(d) + ' ' + add(h) +':'+ add(min);
				if(this.val == 'begin_at') {
					this.option.start_at = date
				}
				this.option[this.val] = date;
				this.showTime = false;
				
			},
			closeTime() {
				this.showTime = false
			},
			openTime(n) {
				this.showTime = true;
				this.val = n;
			},
			async isLimit() {
				let res = await this.$api.get('staff/course/limit');
				if(res.code == 200){
					if(res.data.limit == 2) {
						this.typeList = [
							{
								name: '公开课',
								type: 1
							},
							{
								name: '私教课',
								type: 2
							}
						]
					}else {
						this.typeList = [
							{
								name: '公开课',
								type: 1
							},
						]
					}
				}
			},
			async shopList(num) {
				var shop_id = uni.getStorageSync('shopId');
				let res = await this.$api.get('crm/table/location/list', {
					shop_id,
					date: '',
				});
				if(res.code == 200) {
					var arr = res.data.list;
					arr.forEach(v => {
						v.isCheck = false;
					})
					this.list = arr;
					if(num != 1) {
						this.open('showLocation');
					}
				}
			},
			chooseClub(v,i) {
				this.list.forEach(v => {
					v.isCheck = false;
				})
				this.list[i].isCheck = true;
				this.checkIndex = i;
				this.option.table_location_id = v.id;
				console.log(this.checkIndex,this.option.table_location_id,'==========');
				this.close('showLocation');
			},
			toTimePage() {
				
				if(this.option.table_location_id && this.type) {
					this.$to(`/pages/home/publish/choose_time?type=${this.type}&location_id=${this.option.table_location_id}`)
				}else{
					if(!this.option.table_location_id && this.type){
						this.toast('请先选择场馆');
					}
					else {
						this.toast('请先选择课程类型');
					}
				}
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #FFF;
		padding-bottom: 40rpx;
	}
</style>

<style lang="scss" scoped>
	.t-c {
		text-align: center;
	}
	.submit,.un_submit{
		margin: 0;
		padding: 0;
		width: 93rpx;
		height: 47rpx;
		background: #F17816;
		border-radius: 6rpx;
		font-size: 24rpx;
		color: #FFF;
		text-align: center;
		line-height: 47rpx;
		
	}
	.un_submit::after {
		border: none;
	}
	.un_submit {
		background: #F5F5F5;
		color: #B3B3B3;
	}
	.course {
		padding: 0 47rpx;
		margin-bottom: 40rpx;
		&_label {
			font-size: 29rpx;
			font-family: PingFang SC Bold;
			margin-bottom: 30rpx;
		}
		.into {
			width: 11rpx;
			height: 19rpx;
		}
		&_font {
			font-size: 27rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #F5F5F5;
		}
		&_input {
			font-size: 27rpx;
		}
		.upload_video {
			width: 650rpx;
			height: 233rpx;
		}
		.grid {
			display: grid;
			grid-template-columns: 146rpx 146rpx 146rpx 146rpx;
			
			.upload_img {
				width: 133rpx;
				height: 133rpx;
				margin-bottom: 16rpx;
				position: relative;
				image {
					width: 133rpx;
					height: 133rpx;
				}
				.close_img {
					width: 23rpx;
					height: 23rpx;
					position: absolute;
					right: 7rpx;
					top: 7rpx;
					z-index: 9;
				}
			}
		}
		&_textarea {
			padding: 22rpx;
			font-size: 27rpx;
			background-color: #F5F5F5;
		}
	}
	.pop_box {
		font-size: 27rpx;
		.pop_tit {
			text-align: center;
			line-height: 80rpx;
			border-bottom: 10rpx solid #F5F5F5;
			padding: 0 30rpx;
			.pop_close {
				color: #B3B3B3;
			}
			.pop_btn {
				color: #F17816;
				font-weight: bold;
			}
		}
		.class_box {
			height: 50vh;
			.class_item {
				color: #B3B3B3;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-bottom: 1rpx solid #F5F5F5;
			}
			.class_act {
				color: #000000;
			}
		}
	}
	.fw-b {
		font-size: 32rpx;
		font-family: PingFang SC Bold;
	}
	.fw-n {
		font-size: 27rpx;
	}
	.noMore {
		line-height: 1;
		font-size: 27rpx;
		.toAddbtn{
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 12rpx;
			margin: 40rpx auto;
			background-color: #F17816;
			color: #FFF;
		}
	}

	.store-box {
		height: 120rpx;
		line-height: 120rpx;
		border-bottom: 1rpx solid #F5F5F5;
		background-color: #FFF;
		padding: 0 33rpx;
		font-size: 27rpx;
	}
	.teacher_img {
		width: 73rpx;
		height: 73rpx;
		border-radius: 13rpx;
		margin-right: 26rpx;
	}
	.teacher_name {
		font-size: 27rpx;
	}
	.btn {
		background-color: #F17816;
		color: #FFF;
		margin: 27rpx;
		font-size: 32rpx;
	}
</style>
